<template>
    <div class="mark-matrix">
        <!-- 1.左侧tree -->
        <div class="word-tree" v-if="treeData.length">
            <el-tree :data="treeData" :props="defaultProps" :highlight-current=true ref="tree"
               @node-click="handleNodeClick"></el-tree>
        </div>


        <div class="rightDiv">

            <!-- 2.1.当前节点信息: 节点, 关键词列表 -->
            <div class="cur_nodeinfo">
                <a target="_blank" href="/gateway/web/jz/allExcel" style="float:right;">导出全部矩阵</a>

                <div>当前选择框架: {{curNode.label}}</div>
                <div>当前城市: 
                    <!--<el-form-item label="当前城市">-->
                        <el-select v-model="curRegion" :multiple="false" filterable clearable placeholder="全部" @change="region_change">
                            <el-option  v-for="(item,index) in regionList"  :key="index"  :label="item"  :value="item"></el-option>
                        </el-select>
                    <!--</el-form-item>-->
                </div>
                <div v-loading="listLoading">
                    <el-tag :key="idx" v-for="(item, idx) in matrixList" closable :disable-transitions="false" @close="tagDel_confirm(idx)"  :title="item.statements">
                        {{item.statements|ellipsis}}
                    </el-tag>
                </div>

            </div>

        </div><!-- rightDiv -->

    </div>

</template>

<script>
import {getWordsTree} from "@/api/words-fream-tree";
import {searchKeyByEx, searchArticle} from "@/api/mark-policy";
import {getPolicyById} from "@/api/policy-edit";
import {addWord, delWord, getWordsList} from "@/api/word-manage-list";

import {getAllRegion, getMatrixList, matrixDel, matrixAdd, getPolicyListForMatrix} from '@/api/matrix'


import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
    name: "matrixManage",
    components: {Pagination},
    filters: { 
        ellipsis(value) {
            let maxLen = 70;
            if (!value) return "";
            if (value.length > maxLen) {
                return value.slice(0, maxLen) + "...";
            }
            return value;
        },
    },
    data() {
        return {
            curStep: '2search',     // 2search,3detail

            treeData:[],
            curNode:{ id:0, label:''  },

            regionList:[],
            curRegion:'',

            matrixList:[],


            listLoading: false,
            defaultProps: {
              //children: 'childWordFream',
              children: 'children',
              label: 'name'
            },

        }
    },
    created() {
        this.getWordsTree();
        this.getAllRegion();
    },
    methods: {
        // 1.左侧树
        getWordsTree() {
            this.listLoading = true;
            getWordsTree().then(res => {
                this.treeData = res.result;
                this.listLoading = false;
            });
        },
        handleNodeClick(data) {
            console.log(data);      
            this.curNode = data;        // id:2, label:"xxx", level:2
            this.matrix_update();
            //console.log(this.$refs.tree.getCurrentNode());
        },
        /*tree_getCurNode(){
            console.log(this.$refs.tree.getCurrentNode());
            return this.$refs.tree.getCurrentNode();
        },*/

        // 2.城市列表
        getAllRegion(){
            getAllRegion().then(res => {
                console.log('[getAllRegion]' , res.result);
                this.regionList = res.result;
                if(!this.curRegion){
                    //this.curRegion = this.regionList[0] || '';
                }
            })
        },
        region_change(){
            this.matrix_update();
        },



        // 3.matrix列表
        matrix_update(){
            console.log('[matrix_update]', this.curRegion);
            this.listLoading = true;
            this.policy_words = [];
            if( this.curNode.id ){
                //let param = { wordFreamId:[this.curNode.id], regions:[this.curRegion], pageSize:100}
                let param = { wordFreamId:[this.curNode.id], pageSize:100}
                if(this.curRegion){
                    param['regions'] = [this.curRegion];
                }
                getMatrixList(param).then(res => {
                    console.log('[getWordsList]' , res.result);
                    // {id:1, keyword:'xx'}
                    this.matrixList = res.result;
                    this.listLoading = false;
                })
            }
        },


        tagDel(idx){
            console.log('[tagDel]', idx, this.policy_words);
            let param={id: this.matrixList[idx].id }
            matrixDel(param).then(res => {
                console.log('[tagDel]res: ' ,res);
                this.matrixList.splice(idx, 1)
                this.$message({ message: '删除成功！', type: 'success' })
            })
        },
        tagDel_confirm(idx){
            this.$confirm("您确定删除?", "提示", {
                confirmButtonText: "确定", cancelButtonText: "取消",type: "warning"
            }).then(() => {
                this.tagDel(idx);
            }).catch(() => {})
        },

    }
}
</script>

<style lang="less" scoped>
  .mark-matrix {
    display: flex;

    .word-tree {
      width: 20%;
      margin-left: 0;
      border: 1px solid gray;
      padding: 20px;
      border-radius: 5px;
    }

    .rightDiv{
        width: 75%;
        padding-left: 48px;

        .el-tag{
            margin-right:5px; margin-top:5px;
        }

        .cur_nodeinfo{
            margin-top:10px;
        }

        .search-area {
            margin-top:10px;
            .search {
                width: 300px;
                display: flex;
                margin-bottom: 24px;
            }
        }

        .detailArea{
            margin-top:20px;
        }

    }





    .keywords-area {
      border: 1px solid gray;
      padding: 24px;

      .area-title {
        margin-bottom: 12px;
      }

      .checkbox {
        margin-bottom: 12px;

      }
    }

    .table-area {
      border: 1px solid gray;
      margin-top: 12px;
    }

  }
</style>
